<script setup>
import Head from './components/Head.vue'
import AmplifyApp from './components/head_icon/AmplifyApp.vue'
import { ref, onMounted } from 'vue'

const urlPath = ref('')
const showHead = ref(true)
const getVideo = ref()
const playTime = ref(0)
const sizeVolume = ref(1)
const currentTime = ref(0)
const duration = ref(0)
const videoW = ref(0)
const videoH = ref(0)
let showAmplifyVideo = false;

// 接收用户点击的文件
window.electron.ipcRenderer.on('open-file', (e, paths) => {
  urlPath.value = paths[1];
  getVideo.value.load();
});

const event = () => {
  // 视频播放
  getVideo.value.addEventListener('play', () => {
    showHead.value = false;
    if(!urlPath.value) { return }
    let w = getVideo.value.videoWidth,
        h = getVideo.value.videoHeight
    
    console.log(w, h);
    // 判断视频宽度和高度在一定范围内
    if(w < h) {
      if((w > 400 && h > 700) && (w <= 720 && h <= 1280)) {
        w = w / 2;
        h = h / 2;
      } else if((w > 720 && h > 1280) && (w <= 1280 && h <= 1920)) {
        w = w / 3;
        h = h / 3;
      }
    }
    if(w > h) {
      if((w > 1500 && h > 800) && (w < 2400 && h < 1500)) {
        w = w / 2;
        h = h / 2;
      }
    }
    videoW.value = w;
    videoH.value = h;
    if(showAmplifyVideo) { return }
    window.electron.ipcRenderer.invoke('video-w-h', w, h);
  });
  // 当视频暂停播放时触发
  getVideo.value.addEventListener('pause', () => {
    showHead.value = true;
  });
  // 当视频播放结束时触发
  getVideo.value.addEventListener('ended', () => {
    showHead.value = true;
  });
  // 当视频的播放位置发生改变时触发
  getVideo.value.addEventListener('timeupdate', () => {
    showHead.value = false;
    currentTime.value = getVideo.value.currentTime;
    duration.value = getVideo.value.duration;
    playTime.value = getVideo.value.currentTime / getVideo.value.duration * 100;
  });
  // 当视频元素遇到错误时触发
  getVideo.value.addEventListener('error', () => {
    showHead.value = true;
  });
  // 控制上下左右
  document.addEventListener('keydown', (event) => {
   if(event.keyCode === 38) {
    // 放大音量
    if(sizeVolume.value >= 0.9) { return }
    sizeVolume.value = sizeVolume.value + 0.1;
    getVideo.value.volume = sizeVolume.value;
   } else if(event.keyCode === 40) {
    // 缩小音量
    if(sizeVolume.value <= 0.1) { return }
    sizeVolume.value = sizeVolume.value - 0.1;
    getVideo.value.volume = sizeVolume.value;
   } else if(event.keyCode === 37) {
    // 快进
    currentTime.value = currentTime.value - 0.1;
    getVideo.value.currentTime = currentTime.value;
   } else if(event.keyCode === 39) {
    // 回溯
    if(currentTime.value >= duration.value) { return }
    currentTime.value = currentTime.value + 0.1;
    getVideo.value.currentTime = currentTime.value;
   } else if(event.keyCode === 32)  {
    videoPlay()
   }

});
}

// 取消全屏
document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    showAmplifyVideo = false;
  }
});

// 控制播放和停止
const videoPlay = () => {
  if(showAmplifyVideo) { return }
  if(showHead.value) {
    getVideo.value.play()
  } else {
    getVideo.value.pause()
  }
}

// 控制全屏
const amplifyVideo = () => {
  showAmplifyVideo = true;
  getVideo.value.requestFullscreen()
}

onMounted(() => {
  event()
})
</script>

<template>
  <div class="index" :style="`width: ${videoW}px;`">
    <Head v-show="showHead" class="index-head"></Head>
    <div class="home" :style="`width: ${videoW}px;`">

      <div class="video">
        <video
          ref="getVideo"
          loop
          autoplay
          class="video-play"
          :width="`${videoW}px`"
          controlslist="nodownload"
          disablePictureInPicture
          oncontextmenu="return false"
          @click="videoPlay">
          <source :src="urlPath" type="video/mp4">
          <source :src="urlPath" type="video/ogg">
        </video>
      </div>
      <i class="progress" :style="`width: ${playTime}%;`"></i>
      <div v-show="showHead" class="box-control">
        <div class="file-name">
          {{ urlPath }}
        </div>
        <div class="control">
          <AmplifyApp class="amplify-video" @click="amplifyVideo" />
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
.index {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  border-radius: 5px;
  background-color: var(--home-bg);
}

.index-head {
  animation: display 2s;

  top: 0;
  left: 0;
  z-index: 50;
  position: fixed;
}

.home {
  display: flex;
  flex-direction: column;
}

.video-play {
  height: 100%;
}

.progress {
  height: 2px;
  z-index: 100;
  background-color: var(--home-progress);

  left: 0;
  bottom: 0;
  position: fixed;
}

.box-control {
  width: 100%;
  height: 40px;
  animation: display 2s;
  background-color: rgba(0, 0, 0, 0.4);

  left: 0;
  bottom: 0;
  z-index: 50;
  position: fixed;

  display: flex;
}
.file-name{
  flex: 8;
  color: #ffffff;
  font-size: 12px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.control {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.control .amplify-video {
  width: 20px;
  height: 20px;
  margin: 0 10px;
  display: block;
}
</style>
